<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h4 style="margin: 0px">评论管理页面</h4>
      <el-divider></el-divider>
      <el-form
        ref="commentsSearchForm"
        :inline="true"
        :model="commentsSearchForm"
        class="demo-form-inline"
      >
        <el-form-item prop="uname">
          <el-input
            class="inputs"
            size="small"
            v-model.trim="commentsSearchForm.uname"
            clearble
            placeholder="用户名"
          >
          </el-input>
        </el-form-item>
             <el-form-item prop="uname">
          <el-input
            class="inputs"
            size="small"
            v-model.trim="commentsSearchForm.comment"
            clearble
            placeholder="评论内容"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit"
            >查询</el-button
          >
          <el-button size="small" type="default" @click="onReset"
            >重置</el-button
          >
          <el-button size="small" type="success" @click="toAdd">添加</el-button>
          <el-button size="small" type="danger" @click="delBatch"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="序号" width="80"> </el-table-column>
      <el-table-column prop="uname" label="用户名"> </el-table-column>
      <el-table-column prop="pname" label="商品名"> </el-table-column>
      <el-table-column prop="ctime" sortable label="评价时间">
      </el-table-column>
      <el-table-column prop="comment" label="评价内容"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="success" size="small"
            >编辑</el-button
          >
          <el-button @click="handleDel(scope.row)" type="danger" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-divider> </el-divider>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pager.pageNum"
      :page-sizes="pager.options"
      :page-size="pager.pageSize"
      layout="total, prev, pager, next, jumper, sizes"
      :total="pager.count"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import moment from 'moment';
import commentsApi from '@/http/commentsApi';
export default {
  created() {
    //http请求
    this.getList();
  },
  data() {
    return {
      commentsSearchForm: {
        uname:'',
        comment:''
      },
      tableData: [],
      batchIds: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    getList() {
      commentsApi
      .getByPage({
          ...this.commentsSearchForm,
          pageNum: this.pager.pageNum,
          pageSize: this.pager.pageSize,
        })
        .then(res => {
          console.log(res);
          console.log(this.pager);
          if (res.data.code == 200) {
            this.pager = res.data.data;
            this.tableData = this.pager.data;
            this.tableData.forEach(value => {
              value.ctime = moment(value.ctime).format('YYYY-MM-DD');
            });
          }
        });
    },
    toAdd() {
      this.$router.push('/goods/comment/toAdd.html');
    },
    onSubmit() {
      this.getList();
    },
    onReset() {
      this.$refs['commentsSearchForm'].resetFields();
    },
    delBatch() {
      if (this.batchIds.length == 0) {
        this.$message.warning('请勾选要删除的数据！');
        return;
      }
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          commentsApi.delBatch(this.batchIds).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.batchIds = [];
      val.forEach(item => this.batchIds.push(item.id));
    },
    handleDel(row) {
      console.log(row);
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          commentsApi.delBatch(row.id).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push(`/goods/comment/toEdit/${row.id}.html`);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pager.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pager.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style>
.el-pagination {
  text-align: center;
}

.el-card__header {
  padding: 18px 20px;
  border-bottom: 0px solid #ebeef5 !important;
  box-sizing: border-box;
}

.el-card__body {
  padding: 0 !important;
}

.inputs {
  width: 140px !important;
}
</style>
